<template>
  <div class="heal">
    <ul>
      <a @click="tohtinfo(item.content,'/htinfo')" v-for="(item, index) in healthList" :key="index">
        <div class="li" @click="getbgc(index)" :class="{'active':ind === index}">
          <div class="borderbox"></div>
          <span class="span">{{item.title}}</span>
          <div class="time">{{item.transferTime}}</div>
        </div>
      </a>
    </ul>
  </div>
</template>

<script>
import urls from '../../common.js'
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      ind: '',
      content: '',
      healthList: []
    }
  },
  mounted () {
    this.findAllLocalPic()
  },
  methods: {
    getbgc (index) {
      this.ind = index
    },
    findAllLocalPic () {
      // 本科室图文
      const Qs = require('qs')
      var _this = this
      this.$http.post(urls.findHealthImageAndVideo, Qs.stringify({ 'dpId': this.$route.query.dpId, 'type': '1', 'keyWord': '' }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }
      ).then(result => {
        if (result.body.code === '200') {
          _this.healthList = result.body.data
        }
      })
    },
    tohtinfo (res, params) {
      if (!res) {
        // this.showflag = true
        // setTimeout(() => {
        //   this.showflag = false
        // }, 3000)
        Toast({
          message: '当前列表暂无内容!',
          position: 'middle',
          duration: 2000
        })
      } else {
        this.$router.push({
          query: { id: res, dpId: this.dpId },
          path: params
        })
      }
    }
  },
  props: ['dpId']
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/color.styl';

ul {
  max-height: 8.5rem;
  overflow-y: auto;
}

.li {
  height: 0.7rem;
  border-radius: 0.1rem;
  background-color: $color-white;
  box-shadow: 2px 3.464px 12px 0px rgba(127, 135, 143, 0.3);
  padding: 0 0.3rem;
  line-height: 0.7rem;
  margin: 0 0.3rem 0.2rem 0.3rem;

  .borderbox {
    float: left;
    width: 0.04rem;
    height: 0.3rem;
    background-color: $color-main;
    margin: 0.2rem 0.2rem 0 0;
  }

  .span {
    font-size: 0.24rem;
    color: $color-health;
  }

  .time {
    float: right;
    font-size: 0.2rem;
    color: $color-health1;
  }
}

.active {
  background-color: $color-bgc;
}

</style>
